<template xmlns:v-swiper="轮播图">
    <el-row v-loading="loading">
      <el-col :span="isPc ? 16 :24">

        <!--首页轮播图-->
        <!--<el-carousel class="index-carousel-box" :height="showImg ? '300px':'200px'">-->
          <!--<el-carousel-item><img src='../assets/images/ad/1.jpg' alt="轮播图" class="index-carousel-image"></el-carousel-item>-->
          <!--<el-carousel-item><img src='../assets/images/ad/2.jpg' alt="轮播图" class="index-carousel-image"></el-carousel-item>-->
          <!--<el-carousel-item><img src='../assets/images/ad/3.jpg' alt="轮播图" class="index-carousel-image"></el-carousel-item>-->
          <!--<el-carousel-item><img src='../assets/images/ad/4.jpg' alt="轮播图" class="index-carousel-image"></el-carousel-item>-->
        <!--</el-carousel>-->

        <div v-swiper:mySwiper="swiperOption" class="index-swiper-box">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img src='../assets/images/ad/1.jpg' alt="轮播图" class="index-carousel-image"></div>
            <div class="swiper-slide"><img src='../assets/images/ad/2.jpg' alt="轮播图" class="index-carousel-image"></div>
            <div class="swiper-slide"><img src='../assets/images/ad/3.jpg' alt="轮播图" class="index-carousel-image"></div>
            <div class="swiper-slide"><img src='../assets/images/ad/4.jpg' alt="轮播图" class="index-carousel-image"></div>
          </div>
          <div class="swiper-pagination swiper-pagination-bullets"></div>
        </div>

        <!--文章列表-->
        <div class="index-divider"></div>
        <ul class="index-article" v-loading="articleLoading">
          <li class="index-article-box" v-for="(item,index) in info.results" :key="index">
            <span class="index-article-title" @click="switchArticle(item)">{{item.title}}</span>
            <span class="index-article-content">{{item.desc}}</span>
            <div class="index-img-box">
              <img :src="item.cover_image" v-preview="item.cover_image" class="index-article-img" alt="" v-if="showImg">
            </div>
            <span @click="$router.push('/homePage?id=' + item.user.id)" class="index-article-author-name">{{item.user.nickname}}</span>
            <span class="index-article-comment"><i class="iconfont icon-pinglun"></i>{{item.comment_number}}</span>
            <span class="index-article-like"><i class="iconfont icon-favour-full"></i>{{item.like_number}}</span>
            <div class="index-article-divider"></div>
          </li>
        </ul>
        <el-pagination
          class="index-pages"
          background
          layout="prev, pager, next"
          :total="info.count"
          @current-change="changePage"
          :page-size="user_page_size">
        </el-pagination>
      </el-col>

      <el-col :span="5" v-if="isPc">
        <!--右侧推荐作者版块-->
        <div class="index-right-section"><span>推荐作者</span><span class="index-change-button"><div @click="userNext"><i class="iconfont icon-zhuanhuan"></i><span class="index-change-text">换一批</span></div></span></div>
          <ul class="index-recommend-author" v-loading="userLoading">
            <li class="index-recommend-author-li" v-for="(item,index) in hotInfo.results" :key="index">
              <img @click="$router.push('/homePage?id=' + item.id)" :src="item.header_image" alt="" class="index-recommend-author-img" />
              <span @click="$router.push('/homePage?id=' + item.id)" class="index-recommend-author-name">{{item.nickname}}
                <span class="iconfont icon-nan" v-if="item.sex==='男'"></span>
                <span class="iconfont icon-nv" v-if="item.sex==='女'"></span>
              </span>
              <span class="index-recommend-author-detail">总共收到{{item.liked_num}}个赞</span>
              <span v-if="item.followed" class="index-recommend-author-followed" @click="cancel(item)"><i class="el-icon-check"></i>已关注</span>
              <span v-else class="index-recommend-author-follow" @click="follow(item)"><i class="el-icon-plus"></i>关注</span>
            </li>
          </ul>
          <div class="index-show-more-button" @click="$router.push('/recommendAuthor')">查看全部<i class="el-icon-arrow-right"></i></div>
      </el-col>
    </el-row>
</template>

<script>
  import {mapState} from 'vuex'
  import {getArticleAll} from "../api/article";
  import {getHotUser} from "../api/user";
  import {userFollow,getUserFollow,unFollow} from "../api/operation";

  export default {
  data(){
    return{
      swiperOption: {
        loop: false,              //环路，是否可以从最后一张切到第一张
        grabCursor : true,        //放到图片上显示为小手
        autoHeight: true,         //高度随内容变化
        setWrapperSize :true,     //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
        roundLengths : true,      //设定为true将slide的宽和高取整(四舍五入)以防止某些分辨率的屏幕上文字或边界(border)模糊。
        // centeredSlides: true,     设定为true时，active slide会居中，而不是默认状态下的居左。
        // preloadImages:false,      //默认为true，Swiper会强制加载所有图片。
        // spaceBetween: 20,    在slide之间设置距离（单位px）
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets'     //分液器的样式
        },
        on: {
          slideChange() {
            // console.log('onSlideChangeEnd', this);   滑动的回调事件
          },
          tap() {
            // console.log('onTap', this);    回调函数，当你轻触(tap)Swiper后执行。在移动端，click会有 200~300 ms延迟，所以请用tap代替click作为点击事件。接受touchend事件作为参数
          },
/*          slideChangeTransitionStart:function(){
            alert('初始化时触发了一次回调');
          }     初始化时候的回调函数,*/
        }
      },
      info:{
        title:'',
        desc:'',
        user:{},
        cover_image: '',
        comment_number:'',
        like_number:''
      },
      hotInfo:{},
      userPage:1,
      article_page_size:5,
      user_page_size:5,
      loading:false,
      userLoading:false,
      articleLoading:false,
      followInfo:{}
    }
  },
  created(){
    this.loading=true;
    this.getArticleAllList();
    this.getHotUserList();
  },
  computed:{
    ...mapState('base', {
      isPc: state => state.isPc,
      showImg: state => state.showImg
    }),
    ...mapState('user', {
      token: state => state.token,
    }),
  },
  methods:{
    getArticleAllList(){
      getArticleAll('','?page_size=' + this.article_page_size + '&ordering=-add_time').then(res=>{
        this.info=res.data;
      }).catch(error=>{

      })
    },
    //关注用户
    follow(item){
      let vm=this;
      if(vm.token){
        userFollow({"followed_user":item.id}).then(res=>{
          vm.$message.success('关注成功');
          item.followed=true;
        }).catch(error=>{
          vm.$message.error("关注失败");
        })
      }else{
        vm.$message.error('请先登录在进行以下操作');
      }
    },
    getHotUserList(){
      let vm=this;
      getHotUser('?page_size=' + vm.user_page_size + '&page=' + vm.userPage).then(res=>{
        vm.hotInfo=res.data;
        console.log(res.data);
        if(vm.token){
          getUserFollow('').then(res=>{
            vm.followInfo=res.data.results;
            for(let i in vm.hotInfo.results){
              for(let j in vm.followInfo){
                if(vm.hotInfo.results[i].id === vm.followInfo[j].followed_user.id){
                  vm.hotInfo.results[i].followed=true;
                  break;
                }
              }
            }
            vm.loading=false;
          }).catch(error=>{
            vm.loading=false;
          })
        }else{
          vm.loading=false;
        }

      }).catch(error=>{
        vm.loading=false;
        console.log(error.data);
      })
    },
    switchArticle(item){
      this.$router.push({path:'/article',query:{'id':item.id}});
    },
    changePage(now){
      this.articleLoading=true;
      getArticleAll('','?page_size=' + this.article_page_size + '&page=' + now + '&ordering=-add_time').then(res=>{
        this.info=res.data;
        this.articleLoading=false;
        console.log(res.data);
      }).catch(error=>{
        this.articleLoading=false;
      })
    },
    userNext(){
      this.userPage+=1;
      let vm=this;
      vm.userLoading=true;
      if(Math.ceil(vm.hotInfo.count/vm.user_page_size)<vm.userPage){
        vm.userLoading=false;
        vm.$message.error('已经给你推荐完啦...');
      }else{
        getHotUser('?page_size=' + vm.user_page_size + '&page=' + vm.userPage).then(res=>{
          vm.hotInfo=res.data;
          getUserFollow('').then(res=>{
            vm.followInfo=res.data.results;
            for(let i in vm.hotInfo.results){
              for(let j in vm.followInfo){
                if(vm.hotInfo.results[i].id === vm.followInfo[j].followed_user.id){
                  vm.hotInfo.results[i].followed=true;
                  break;
                }
              }
            }
            vm.userLoading=false;
          }).catch(error=>{
            vm.userLoading=false;
          })
        }).catch(error=>{
          vm.userLoading=false;
          console.log(error.data);
        })
      }
    },
    cancel(item){
      let vm=this;
      if(vm.token){
        unFollow(item.id).then(res=>{
          vm.$message.success('取消关注成功');
          item.followed=false;
        }).catch(error=>{
          vm.$message.error('取消关注失败');
        });
      }else{
        vm.$message.error('请先登录在进行以下操作');
      }
    },
  }
}
</script>

<style lang="stylus" scoped>
  @import "../stylus/color.styl"
  .index-swiper-box{
    max-width 600px
    border-radius 8px
    overflow hidden
    margin 0 auto 30px auto
  }
  .swiper-wrapper{
    max-width  600px
    height auto
  }
  .index-carousel-image{
    width: 100%;
    height: auto;
    max-width: 600px;
    display block
    border-radius 8px
    margin 0 auto
  }
  .index-right-section{
    margin: 30px auto;
    display: flex;
    justify-content:space-between;
    align-items:center;
    color $color-gray
    font-size 13px
  }
  .index-change-button .icon-zhuanhuan{
    font-size 9px
    display inline-block
    transition all .2s
  }
  .index-change-button:active .icon-zhuanhuan{
    color $color-success
    transform rotate(360deg)
  }
  .index-change-button:active{
    color $color-success
  }
  .index-change-button:hover{
    cursor pointer
  }
  .index-change-text{
    margin-left 5px
  }
  .index-recommend-author{
    list-style none
    padding 0
  }
  .index-recommend-author-li{
    position relative;
    margin-top 5px
  }
  .index-recommend-author-img{
    width 50px
    height 50px
    border-radius 50px
    cursor pointer
    border 1px solid $color-border
  }
  .index-recommend-author-name{
    position absolute
    left 65px
    color $color-title
    cursor pointer
    top 5px
    font-size 14px
  }
  .index-recommend-author-detail{
    position absolute
    left 65px
    color $color-gray
    bottom  5px
    font-size 12px
  }
  .index-recommend-author-follow{
    position absolute
    font-size 13px
    top 5px
    right 0
    color $color-success
    cursor pointer
  }
  .index-recommend-author-followed{
    position absolute
    font-size 13px
    top 5px
    right 0
    color $color-gray
    cursor pointer
  }
  .index-show-more-button{
    font-size 13px
    width 100%
    padding 7px 0
    border 1px solid $color-border
    text-align center
    border-radius 8px
    cursor pointer
    background-color $color-background
    color $color-gray
  }
  .index-show-more-button:hover{
    font-size 13px
    width 100%
    padding 7px 0
    border 1px solid $color-success
    text-align center
    border-radius 8px
    cursor pointer
    background-color $color-background
    color $color-success
  }


  .index-divider{
    width: 100%;
    position: relative;
    top:-1px;
    height: 1px;
    background-color: $color-divider;
    max-width 600px
    margin 0 auto
  }
  .index-article{
    list-style none
    padding 0
    margin 0
  }
  .index-article-box{
    position relative
    max-width 600px
    margin 0 auto
  }
  .index-img-box{
    width 150px
    height 100px
    right 0
    top 50%
    border-radius 6px
    display inline-block
    position absolute
    margin-top -51px
    overflow hidden
  }
  .index-article-img{
    width 150px
    height 100px
    position absolute
    border-radius 6px
    display block
    border 1px solid $color-border
    right 0
    top 50%
    margin-top -51px
    cursor zoom-in
    transition all 0.9s
  }
  .index-article-img:hover{
    transform scale(1.3)
  }
  .index-article-title{
    font-size 16px
    color $color-title
    font-weight 700
    display block
    margin-bottom 7px
    cursor pointer
    padding-top 16px
  }
  .index-article-title:hover{
    text-decoration  underline
  }
  .index-article-author-name:hover{
    color $color-content
  }
  .index-article-content{
    font-size 13px
    color $color-gray
    max-width 430px
    display block
    margin-bottom 7px
    line-height 25px
    min-height 50px
  }
  .index-article-author-name{
    font-size 12px
    color $color-gray
    display inline-block
    padding-bottom 16px
    margin-right 7px
    cursor pointer
  }
  .index-article-comment{
    font-size 12px
    color $color-gray
    display inline-block
    margin-right 7px
  }
  .index-article-like{
    font-size 12px
    color $color-gray
  }
  .index-article-divider{
    width: 100%;
    height: 1px;
    background-color: $color-divider;
    max-width 600px
    margin 0 auto
  }
  .index-pages{
    float right
    margin-top 20px
    margin-bottom 30px
    padding-right 50px
  }
  .icon-yanjing{
    font-size 10px
    margin-right 2px
  }
  .icon-pinglun{
    font-size 10px
    margin-right 2px
  }
  .icon-favour-full{
    font-size 11px
    margin-right 2px
  }
  .el-icon-plus{
    margin-right 2px
  }
  .el-icon-check{
    margin-right 2px
  }
  .icon-nan{
    color $color-blue
    font-size 14px
  }
  .icon-nv{
    color $color-pink
    font-size 14px
  }
</style>
